<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Custom Tab Example</title>

<!-- Incude CSS for JQuery Vertical Tabs -->
<link rel="stylesheet" type="text/css" href="css/jquery-jvert-tabs-1.1.4.css" />

<!-- Include JQuery Core-->
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

<!-- Include JQuery Vertical Tabs plugin -->
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>

</head>
<body>



<script type="text/javascript">
$(document).ready(function(){

	$("#vtabs1").jVertTabs();
	$("#vtabs2").jVertTabs({
		selected: 1
	});
	$("#vtabs3").jVertTabs({
		select: function(index){
			alert("You clicked tab " + index);
		}
	});
	$("#vtabs4").jVertTabs();
	$("#vtabs5").jVertTabs({
		equalHeights: true
	});
	$("#vtabs6").jVertTabs({
		select: function(index){
			alert("tab " + index + " opened.");
		}
	});
	$("#vtabs6").jVertTabs('selected',3); // select 4th tab, 0-based.
	$("#vtabs7").jVertTabs({
		selected: 1
	});
	$("#vtabs8").jVertTabs();
	$("#vtabs8").jVertTabs('selected',2); // select 3rd tab, 0-based.
		
	// add click events for open tab buttons
	$("input[id^=openTab]").each(function(index){
		$(this).click(function(){
			openTab("#vtabs6",index);
			return false;
		});
	});	
	function openTab(tabId,index){
		$(tabId).jVertTabs('selected',index);
	}
});
</script>

<div id="vtabs5" class="vtabs">
	<div class="vtabs-tab-column">
		<ul>
			<li class="open"><a href="#vtabs-content-a" class="open">Little Content</a></li>
			<li class="open"><a href="#vtabs-content-b" class="open">Little Content</a></li>
			<li class="closed"><a href="#vtabs-content-b" class="closed">Medium Content</a></li>
			<li class="closed"><a href="#vtabs-content-c" class="closed">Lots of Content</a></li>
		</ul>
	</div>
	<div class="vtabs-content-column" style="margin-left: 169px;">
		<div id="#vtabs-content-a" class="vtabs-content-panel" style="display: block;">
			<div class="avatar">
				
			</div>
		</div>
		<div id="#vtabs-content-b" class="vtabs-content-panel" style="display: none;">
			<p>This is panel 2</p>
			<p>
			The quick brown fox jumped over the lazy dog<br>
			The quick brown fox jumped over the lazy dog<br>
			The quick brown fox jumped over the lazy dog<br>
			The quick brown fox jumped over the lazy dog<br>
			</p>		
		</div>
		<div id="#vtabs-content-c" class="vtabs-content-panel" style="display: none;">
			<p>This is panel 3</p>
			<p>
			A bene placito - At one's pleasure<br>
			A capite ad calcem - From head to heel<br>
			A cappella - In church [style] - i.e. Vocal music only<br>
			A posteriori - From what comes after. Inductive reasoning based on observation, as opposed to deductive, or a priori
			</p>		
		</div>	
	</div>
</div>

</body>
</html>